<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      <el-breadcrumb-item>广告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
    <el-row>
      <el-form :model="ad" label-width="70px">
        <el-col :span="5">
          <el-form-item label="广告名称：" label-width="100px">
            <el-input v-model="ad.adName"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <el-button type="primary" @click="search()" style="margin-left: 15px">查询</el-button>
      <el-button type="primary" @click="addad" style="margin-left: 15px">添加广告</el-button>
    </el-row>
    <el-table
      :data="adlist"
      border
      style="width: 100%">
      <el-table-column
        prop="adName"
        label="广告名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="adTitle"
        align="center">
      </el-table-column>
      <el-table-column
        prop="picPath"
        label="图片"
        align="center">
        <template slot-scope="scope">
          <img style="height: 120px;" v-if="scope.row.picPath.length!=0" :src="'/api/finance-service-cms/wbbase/download/'+scope.row.picPath" class="avatar">
        </template>
      </el-table-column>
      <el-table-column
        prop="adType"
        label="类型"
        align="center">
        <template slot-scope="scope">
          {{scope.row.adType==0?'轮播图':'楼层广告'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        label="跳转路径"
        align="center">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center">
        <template slot-scope="scope">
          <span style="display:none;">{{scope.row.state=(scope.row.status==1)}}</span>
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949" @change="updatestatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-dropdown  size="mini" split-button type="primary" trigger="click">
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="update(scope.row)">修改</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="ad.id==null?'添加广告':'修改广告'"
      :visible.sync="DialogVisible"
      center :close-on-click-modal="false" @closed="crearadform">
      <el-form ref="form" :model="adform" label-width="80px">
        <el-form-item label="上传图片">
          <el-upload
            class="avatar-uploader"
            action="/api/finance-service-cms/wbbase/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="adform.picPath.length!=0" :src="'/api/finance-service-cms/wbbase/download/'+adform.picPath" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="广告名称：" label-width="100px">
              <el-input v-model="adform.adName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="广告标题：" label-width="100px">
              <el-input v-model="adform.adTitle"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="类型：" label-width="100px">
              <el-select v-model="adform.adType" placeholder="请选择">
                <el-option
                  v-for="item in typelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跳转地址：" label-width="100px">
              <el-input v-model="adform.url"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="排序：" label-width="100px">
              <el-input v-model="adform.sort" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="DialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="savead()">确 定</el-button>
  </span>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "Gggl",
      data(){
          return{
            adlist:[],
            ad:{},
            adform:{picPath:''},
            user:{},
            typelist:[
              {id:0,name:'轮播图'},
              {id:1,name:'楼层广告'},
            ],
            DialogVisible:false
          }
      },
      methods:{
        crearadform:function(){

        },
        updatestatus:function(row){
          this.$http.get("/finance-service-cms/wbad/updatestatus/"+row.id+"/"+row.status).then(
            (res)=>{
              if(res.data.success){
                this.$message({
                  message:res.data.message,
                  type: 'success'
                });
                this.search();
              }else{
                this.$message.error(res.data.message);
              }
            }
          );
        },
        update:function(row){
          this.adform=row;
          this.DialogVisible=true;
        },
        savead:function(){
          this.adform.status=0;
          this.$http.post("/finance-service-cms/wbad/addwbad",this.adform).then(
            (res)=>{
              if(res.data.success){
                this.$message({
                  message:res.data.message,
                  type: 'success'
                });
                this.DialogVisible=false;
                this.adform={picPath:''};
                this.search();
              }else{
                this.$message.error(res.data.message);
              }
            });
        },
        handleAvatarSuccess(res, file) {
          this.adform.picPath=file.response.result.path;
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        addad:function(){
          this.DialogVisible=true;
        },
        search:function () {
          this.$http.post("/finance-service-cms/wbad/adlist",this.ad).then(
            (res)=>{
              if(res.data.success){
                this.adlist=res.data.result;
              }else{
                this.$message.error(res.data.message);
              }
            }
          );
        }
      },
      mounted() {
          this.search();
      }
    }
</script>

<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
